<template>
	<view class="page">
		<u-navbar title="组长详情" is-fixed :background="background"></u-navbar>
		<!-- 顶部照片 -->
		<view class="top-img">
			<image class="img" :src="info.bigimage" mode="scaleToFill"></image>
		</view>
		<!-- 教师信息 -->
		<view class="teacher-info">
			<image class="teacher-img" :src="info.image" mode="aspectFill"></image>
			<view class="left">
				<view class="">
					<text style="margin-right: 20rpx; font-weight: 700; font-size: 36rpx;">{{info.name}}</text>
					<!-- <u-icon name="eye-fill" color='#ccc' size="22"></u-icon>
					<text style="font-size: 22rpx; color: #ccc; margin-left: 5rpx;">{{info.reading_volume}}</text> -->
				</view>
				<view class="address">
					{{info.title || ''}}
				</view>
			</view>
			<view class="right-qr" @click="clickQrcode">
				<i class="iconfont icon-qrcode-1-copy " style="color:#fe466b;"></i>
			</view>
			<view class="right" @click="changeCollect">
				<u-icon v-if="!isCollect" name="star" color='#ccc' size="40"></u-icon>
				<u-icon v-else name="star-fill" color='#FE5477' size="40"></u-icon>
			</view>
			<view class="num">
				<u-icon name="eye-fill" color='#FE5477' size="22"></u-icon>
				<text style="font-size: 22rpx; color: #FE5477; margin-left: 10rpx;">{{info.reading_volume}}</text>
			</view>
		</view>
		<!-- 教师介绍 -->
		<scroll-view scroll-y="true" :style="'height:' + scrollH+'rpx;'">
			<view class="teacher-detail">
				<u-parse :html="info.content"></u-parse>
			</view>
			<!-- 荣誉模板 -->
			<view class="model" v-if="images">
				<view class="font-style-xie">荣誉</view>
				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
					<view class="show-item" v-for="(item, index) in iamgesList" :key="index">
						<view class="image">
							<image class="image" :src="item" mode="scaleToFill"></image>
						</view>
					</view>
				</scroll-view>
			</view>
		</scroll-view>
		<!-- 免费试听 -->
		<view class="free-listen">
			<view class="font-style-xie">免费试听</view>
			<scroll-view scroll-y="true" style="height: 210rpx;">
				<view v-for="(item,index) in info.groupleaderfileLst" :key="index">
					<view class="list" @click="AudioTtoDetail(item)">
						<!-- <u-icon name="play-circle-fill" color="#fe466b" size="50"></u-icon> -->
						<image class="img" :src="item.cover_image" mode="scaleToFill"></image>
						<view class="right-map">
							<view class="name u-line-1">{{item.name}}</view>
							<view class="time">
								<u-icon class='icon' name="eye"></u-icon><text
									style="margin-right: 10rpx;">{{item.reading_volume}}</text>
								<u-icon class='icon' name="calendar"></u-icon>
								<text>{{item.createtime | date('yyyy-mm-dd')}}</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<!-- <audios-list :dataList='info.groupleaderfileLst' :pageType='"case"'></audios-list> -->
		</view>
		<qr-madel :src='info.wechat_image' :show='showQrcode'></qr-madel>
	</view>
</template>

<script>
	import audiosList from '../components/audios-list.vue'
	import qrMadel from '../components/qrcodeModal.vue'
	export default {
		components: {
			qrMadel,
			audiosList
		},
		data() {
			return {
				content: '',
				old: {
					scrollTop: 0
				},
				isCollect: true,
				baseUrl: this.$u.http.config.baseUrl,
				showQrcode: false,
				info: {},
				iamgesList: [],
				pageType: 'teamLeader',
				background: {
					backgroundColor: '#FFF',
					background: 'url(https://www.yplm888.com//uploads/20220803/7ed305f9a93ba50b049a7725662b18cc.png) no-repeat',
				},
				scrollH: 0,
				images: ''
			}
		},
		onLoad(option) {
			this.initData(option.id)
		},
		onReady() {
			// this.getnums();
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					that.scrollH = res.windowHeight * 750 / res.windowWidth;
					// #ifdef MP-WEIXIN
					that.scrollH = res.windowHeight * 750 / res.windowWidth - parseInt(res.safeArea.top) -
						1010;
					// #endif
				}
			});
		},
		methods: {
			// 请求数据
			initData(id) {
				this.$u.api.getGroupinfo({
					id
				}).then(res => {
					this.info = res.data
					this.images = res.data.images
					this.iamgesList = res.data.images.split(",")
					this.isCollect = res.data.is_collection
				})
			},
			// 点击二维码
			clickQrcode() {
				this.showQrcode = true
			},
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			// 收藏
			changeCollect() {
				this.$u.api.collect({
					collection_id: this.info.id,
					collection_type: 6
				}).then(res => {
					if (res.code == 1) {
						this.isCollect = this.isCollect ? 0 : 1
						uni.showToast({
							title: res.msg
						})
					}
				})
			},
			// 音频跳转详情
			AudioTtoDetail(item) {
				console.log(78,this.info.id)
				this.$u.route('/packageB/pages/hostpotDetail/hostpotDetail', {
					id: item.id,
					title: item.title,
					pageType: this.pageType,
					teacherId: this.info.id
				})
			},
			// 视频跳转详情
			videoTodetail(id) {
				console.log(id)
				this.$u.route('/packageB/pages/videosDetail/videosDetail', {
					id
				})
			},

		}
	}
</script>

<style lang="scss">
	.page {
		padding-bottom: 40rpx;
		position: relative;
	}

	.top-img {
		background-color: #ccc;
		height: 500rpx;
		width: 100%;
		border-bottom-right-radius: 50rpx;
		border-bottom-left-radius: 50rpx;

		.img {
			height: 500rpx;
			width: 100%;
			border-bottom-right-radius: 50rpx;
			border-bottom-left-radius: 50rpx;
		}
	}

	.teacher-info {
		background-color: #fff;
		display: flex;
		height: 150rpx;
		width: 90%;
		margin: 0 auto;
		margin-top: -75rpx;
		border-radius: 30rpx;
		box-shadow: 0 0px 12px 0 rgba(0, 0, 0, 0.1);
		align-items: center;
		padding: 0 20rpx;
		position: relative;

		.num {
			font-size: 15rpx;
			position: absolute;
			top: 0;
			right: 80rpx;
			text-align: center;
			height: 40rpx;
			min-width: 100rpx;
			color: #FE5477;
			border-bottom-left-radius: 10rpx;
			border-bottom-right-radius: 10rpx;
			background-color: #FFEBEF;
		}

		.teacher-img {
			height: 120rpx;
			width: 120rpx;
			border-radius: 60rpx;
		}

		.left {
			margin-left: 20rpx;

			.address {
				font-size: 24rpx;
				color: #FE5477;
			}
		}

		.right-qr {
			position: absolute;
			right: 120rpx;
			top: 75rpx;
		}

		.right {
			position: absolute;
			right: 40rpx;
			top: 80rpx;
		}
	}


	.teacher-detail {
		text-align: center;
		margin-top: 0rpx;
		padding: 40rpx;
	}

	.font-style-xie {
		font-weight: 700;
		font-size: 32rpx !important;
		font-style: italic;
	}

	.model {
		height: 300rpx;
		margin-top: 40rpx;
		padding: 0 40rpx;

		.scroll-view_H {
			margin-top: 20rpx;
			white-space: nowrap;
			width: 100%;

			.show-item {
				display: inline-block;

				.image {
					height: 200rpx;
					width: 300rpx;
					border-radius: 20rpx;
					margin-right: 20rpx;
					background-color: #ccc;

					.image {
						height: 100%;
						width: 100%;
					}
				}
			}
		}


	}

	.free-listen {
		// position: absolute;
		// bottom: 0rpx;
		width: 100%;
		// margin-top: 40rpx;
		padding: 0 40rpx;
		padding-bottom: 40rpx;
		z-index: 6;

		.list {
			margin-top: 10rpx;
			width: 100%;
			display: flex;
			height: 100rpx;
			// margin-top: 30rpx;
			line-height: 60rpx;
			// justify-content: space-between;
			border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
			// align-items: center;

			.img {
				height: 100rpx;
				width: 100rpx;
				border-radius: 20rpx;
			}

			.right-map {
				margin-left: 20rpx;

				.name {
					margin-left: 0rpx;
					font-weight: 680;
					width: 530rpx;
				}

				.time {
					margin-top: 15rpx;
					color: #ccc;
					font-size: 24rpx;

					// float: right;
					// margin-right: 10rpx;
					.icon {
						margin-left: 0rpx;
						margin-right: 5rpx;
					}
				}
			}
		}

	}
</style>
